<template>
	<div id="appRoot">
		<sidebar>
			<card label="会员卡管理">
				<el-upload slot="header"
						class="upload-btn"
						action="/OSSClientFileImport"
						:data="{action: 'fileUpload'}"
					   	:show-file-list="false"
						:on-success="uploadSuccess">
					<el-button size="small" type="primary">导入</el-button>
				</el-upload>
				<div class="from-query">
					<el-form :inline="true" class="demo-form-inline">
						<el-form-item label="搜索">
							<el-input size="small" v-model="queryData.cardNo" placeholder="会员卡号"></el-input>
						</el-form-item>
						<el-form-item label="卡类型">
							<el-select v-model="queryData.cardType" placeholder="全部">
								<el-option label="全部" value="-1"></el-option>
								<el-option label="实体卡" value="1"></el-option>
								<el-option label="电子卡" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="卡状态">
							<el-select v-model="queryData.state" placeholder="全部">
								<el-option label="全部" value="-1"></el-option>
								<el-option label="未激活" value="0"></el-option>
								<el-option label="已激活" value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="导入时间">
							<el-date-picker
									size="small"
									v-model="queryDate"
									type="daterange"
									placeholder="选择时间范围">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="primary" @click="getTableData(1)">查询</el-button>
						</el-form-item>
					</el-form>
				</div>
			</card>
			<div class="table-container" v-loading.body="loading">
				<template v-if="tableDataError">
					<table-data-fail type="error"></table-data-fail>
				</template>
				<template v-else-if="tableData.length > 0">
					<el-table
							:data="tableData"
							stripe
							border
							style="width: 100%">
						<el-table-column
								prop="cardNo"
								align="center"
								header-align="left"
								label="会员卡号">
						</el-table-column>
						<el-table-column
								prop="month"
								align="center"
								header-align="left"
								label="有效期长（月）">
						</el-table-column>
						<el-table-column
								prop="cardType"
								align="center"
								header-align="left"
								label="卡片类型">
						</el-table-column>
						<el-table-column
								prop="effDate"
								align="center"
								header-align="left"
								label="激活时间">
						</el-table-column>
						<el-table-column
								prop="state"
								align="center"
								header-align="left"
								label="状态">
						</el-table-column>
					</el-table>
					<div class="pagination-wrapper">
						<el-pagination
								@current-change="getTableData"
								:current-page.sync="paginationData.currentPage"
								:page-size="paginationData.pageSize"
								layout="prev, pager, next, jumper"
								:total="paginationData.total">
						</el-pagination>
					</div>
				</template>
				<template v-else>
					<table-data-fail type="empty"></table-data-fail>
				</template>
			</div>
		</sidebar>
	</div>
</template>

<script>
    import moment from 'moment'
	import sidebar from 'components/layout/sidebar.vue'
	import card from 'components/layout/card.vue'
	import tableDataFail from 'components/layout/tableDataFail.vue'
    import ajax from 'common/ajax.js'
    import ajaxUrls from 'common/ajaxUrls.js'
	export default{
		data(){
			return{
				loading: false,
                queryDate: [],
				queryData: {
                    cardNo: '',
                    cardType: '-1',
                    state: '-1',
                    startDate: '',
                    endDate: ''
				},
				paginationData:{
					currentPage: 1,
					pageSize: 10,
					total: 0
				},
				tableDataError: false,
				tableData: [],
			}
		},
        mounted(){
            this.getTableData();
        },
		methods: {
            uploadSuccess(response){
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.card,
                    action: 'impCardInfo',
                    data: {
                        filePath: response.data.fileName
					}
                }).then(function (data) {
                    if(data.resultCode != 0){
                        this.$alert('系统错误，请联系维护人员处理', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
//                                location.reload();
                            }
                        });
                    }else{
                        this.$alert('上传成功', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                }.bind(this)).catch(function (err) {

                })
			},
            getTableData(current){
                if(this.queryDate[1]){
                    this.queryData.startDate = moment(this.queryDate[0]).format('YYYY-MM-DD');
                    this.queryData.endDate = moment(this.queryDate[1]).format('YYYY-MM-DD');
                }else{
                    this.queryData.startDate = '';
                    this.queryData.endDate = '';
                }
                let data = {
                    pageNum: current || this.paginationData.currentPage,
                    pageRow: this.paginationData.pageSize
                };
                data = Object.assign(data, this.queryData);
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.card,
                    action: 'qryCardInfo',
                    data: data
                }).then(function (data) {
                    this.tableData = data.data.items || [];
                    this.paginationData.total = data.data.totalNum || 0;
                }.bind(this)).catch(function (err) {

                })
            }
		},
		components:{
			sidebar,
			card,
			tableDataFail
		}
	}
</script>

<style lang="scss">
	.upload-btn{
		display: inline-block;
	}
</style>